<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>图片合集16</title>
   <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
   <link rel="stylesheet" href="../css/public.css">
   <style>
      .img_collection_16_title {
         text-align: center;
      }

      .img_collection_16_title p{
         color: var(--c_text);
         font-size: var(--f_text);
         line-height: var(--l_text);
      }

      .img_collection_16_title h2{
         color: var(--c_theme);
         font-size: var(--f_title);
         line-height: var(--l_title);
      }

      .img_collection_16_title span{
         display: inline-block;
         padding: 22px 0 0 0;
         color: var(--c_text);
         font-size: var(--f_describe);
         line-height: var(--l_describe);
      }

      .img_collection_16_content {
         padding-top: 60px;
      }

      .img_collection_16_content ul li .img_collection_16_list_box{
         position: relative;
      }

      .img_collection_16_list_img {
         width: 100%;
         height: 450px;
         overflow: hidden;
      }

      .img_collection_16_list_img img{
         transition: .5s ease;
         width: 100%;
         height: 100%;
      }

      .img_collection_16_list_img:hover img{
         transform: scale(1.15);
      }

      .img_collection_16_list_text {
         background-color: var(--c_theme);
         opacity: 0.7;
         position: absolute;
         width: 100%;
         bottom: 0;
      }

      .img_collection_16_list_text p{
         padding: 5px 0;
         color: var(--c_b_nav);
         font-size: var(--f_notes);
         line-height: var(--l_notes);
         text-align: center;
      }

      @media (max-width:768px){
         .img_collection_16_content {
            padding: 30px 0 0 0;
         }

         .img_collection_16_list li {
            padding-left: 0;
            
         }
         .img_collection_16_list_img {
            width: 100%;
            height: 205px;
         }

         .img_collection_16_title span{
            padding: 25px 0 0 0;
         }

         .img_collection_16_list li:nth-child(1),
         .img_collection_16_list li:nth-child(2) {
            padding-bottom: 20px;
         }

         .img_collection_16_list li:nth-child(2),
         .img_collection_16_list li:nth-child(4) {
            padding-right: 0;
            padding-left: 10px;
         }

         .img_collection_16_list li:nth-child(1),
         .img_collection_16_list li:nth-child(3) {
            padding-right: 10px;
         }
      }
   </style>
</head>

<body>
   <div class="img_collection_16 modular">
      <div class="public_width">
         <div class="img_collection_16_title">
            <p>Strategy and layout</p>
            <h2>提供优质娱乐内容</h2>
            <span>以“提供优质娱乐内容”为核心，打造IP（知识产权）内容驱动的大娱乐产业链系统，致力于IP内容的价值较大化和流转较大化。</span>
         </div>

         <div class="img_collection_16_content">
            <ul class="img_collection_16_list row">
               <li class="col-xl-3 col-6">
                  <div class="img_collection_16_list_box">
                     <div class="img_collection_16_list_img">
                        <img src="../images/img_collection_5_1.png" alt="">
                     </div>
                     <div class="img_collection_16_list_text">
                        <p>影视娱乐</p>
                     </div>
                  </div>
               </li>

               <li class="col-xl-3 col-6">
                  <div class="img_collection_16_list_box">
                     <div class="img_collection_16_list_img">
                        <img src="../images/img_collection_5_1.png" alt="">
                     </div>
                     <div class="img_collection_16_list_text">
                        <p>影视娱乐</p>
                     </div>
                  </div>
               </li>

               <li class="col-xl-3 col-6">
                  <div class="img_collection_16_list_box">
                     <div class="img_collection_16_list_img">
                        <img src="../images/img_collection_5_1.png" alt="">
                     </div>
                     <div class="img_collection_16_list_text">
                        <p>影视娱乐</p>
                     </div>
                  </div>
               </li>

               <li class="col-xl-3 col-6">
                  <div class="img_collection_16_list_box">
                     <div class="img_collection_16_list_img">
                        <img src="../images/img_collection_5_1.png" alt="">                     </div>
                     <div class="img_collection_16_list_text">
                        <p>影视娱乐</p>
                     </div>
                  </div>
               </li>
            </ul>
         </div>
      </div>
   </div>
</body>

</html>